import React, { Component } from 'react'
import {
  Form,
  Input,
  Button,
  Toast,
} from 'antd-mobile'
import { UserRegisterApi } from "@/api/user.js";
import style from "./index.module.scss"
export default class index extends Component {
  // 点击注册按钮
  Register = (value) => {
    console.log("value", value);
    if (value.address !== value.confirm) {
      Toast.show({
        content: '两次密码不一致',
        position: 'bottom',
      })
      return
    }
   this.UserLogin(value.username,value.address)

  }
  async UserLogin(username,address){
    let res=await UserRegisterApi({
      phone:username,
      pass:address
    })
    console.log(res.data);
    if(res.data.code===200){
      Toast.show({
        content: res.data.msg,
        position: 'bottom',
      })
      this.props.history.push('/Userlogin')
    }else{
      Toast.show({
        content: res.data.msg,
        position: 'bottom',
      })
    }


  }
// 点击注册按钮
goBack = () => {
  this.props.history.go(-1);
}

render() {
  return (
    <div className={style.login}>
      <div className={style.loginpage}>
        <div></div>
        <h1>用户注册</h1>
      </div>
      <Form onFinish={this.Register}
        footer={
          <Button block type='submit' color='primary' size='large'>
            立即注册
          </Button>
        }>
        <Form.Item
          name='username'
          label='账号'
          rules={[{ required: true, message: '账号不能为空' }]}
        >
          <Input placeholder='请输入账号' />
        </Form.Item>
        <Form.Item name='address' label='密码' rules={[{ required: true, message: '密码不能为空' }]}>
          <Input placeholder='请输入密码' />
        </Form.Item>
        <Form.Item name='confirm' label='确认密码' rules={[{ required: true, message: '密码不能为空' }]}>
          <Input placeholder='请输入确认密码' />
        </Form.Item>
      </Form>
      <div className={style.back} onClick={this.goBack}>返回</div>
    </div>
  )
}
}
